<template>
    <div class="mod-config">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryByCriteria">
        <el-form-item>
          <el-select v-model="dataForm.status" placeholder="请选择类型" @change="queryByCriteria">
            <el-option
            label="全部状态"
            value=""
          >
          </el-option>
            <el-option
              label="未审核"
              :value="0"
            >
            </el-option>
            <el-option
            label="审核成功"
            :value="1"
          >
          </el-option>
            <el-option
              label="审核失败"
              :value="2"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item  prop="selectedOptions" >
            <el-cascader v-model="selectedOptions" size="large" :options="options" :props="{ expandTrigger: 'hover',checkStrictly: false }" @change="handleCityChange"  placeholder="请选择省市区"clearable/>
        </el-form-item>
        <el-form-item>
            <el-input v-model="serchInput" placeholder="请输入文件名检索" clearable></el-input>
          </el-form-item>
        <el-form-item>
          <el-button @click="queryByCriteria()">查询</el-button>
          <el-button type="danger" v-show="showMoveBtn" @click="multipledeleteHandle">删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        stripe
        v-loading="dataListLoading"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="" type="selection" />
        
        <el-table-column prop="fileName" label="文件名" > 
            <el-tooltip placement="top" slot-scope="scope" >
                <div slot="content">文件夹名称：{{scope.row.fileName}}<br/>发布者：{{scope.row.teacherName}}<br/>下载数：{{scope.row.fileLoaddownCount}}<br/></div>
                <div>
                    <el-image style="width: 30px; height: 30px;vertical-align: middle;" :src="require(scope.row.fileType==0?'../../../assets/img/filepacks.png':'../../../assets/img/file.png')" />
                    <span class="filename-span" :class="scope.row.fileType==0?'isDir':''" @click="clickFandP(scope.row)">{{ scope.row.fileName }}</span>
                </div>
            </el-tooltip>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="fileSize" label="大小"> </el-table-column>
        <el-table-column prop="teacherName" label="发布者"> </el-table-column>
        
        <el-table-column prop="status" label="状态" >
          <template slot-scope="scope">
            <el-dropdown @command="switchAuditStatus" style="cursor:pointer" >
                <span class="el-dropdown-link">
                  <el-tag type="info" v-if="scope.row.verifyState==0" style="width: 80px; text-align: center;">未审核</el-tag>
                  <el-tag type="success" v-else-if="scope.row.verifyState==1" style="width: 80px;text-align: center;">审核成功</el-tag>
                  <el-tag type="danger" v-else-if="scope.row.verifyState==2" style="width: 80px;text-align: center;">审核失败</el-tag>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :disabled="scope.row.verifyState==0" :command="[scope.row.id,0]">未审核</el-dropdown-item>
                  <el-dropdown-item :disabled="scope.row.verifyState==1" :command="[scope.row.id,1]">审核成功</el-dropdown-item>
                  <el-dropdown-item :disabled="scope.row.verifyState==2" :command="[scope.row.id,2]">审核失败</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
          </template> </el-table-column>
<el-table-column prop="verifyFailReason" label="审核细节" show-overflow-tooltip> </el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
    <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="viewFile(scope.row)"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteHandle(scope.row)"
              >删除</el-button
            >
          </template>
</el-table-column>
</el-table>


<el-dialog title="输入审核失败原因" :visible.sync="errorMsgvisible" width="400px" destroy-on-close>
    <el-input v-model="approvalData.verifyFailReason" placeholder="" clearable></el-input>
    <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="text" @click="errorMsgvisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="approvalErrorFile">确定</el-button>
      </span>
</el-dialog>
<!-- 分页条 -->
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
</el-pagination>


<!-- 展示文件框 暂时只能预览pdf 暂作注释处理 -->
<!-- <el-dialog title="提示" :visible.sync="viewFileDialogVisible" fullscreen center destroy-on-close>
    <embed type="text/html" :src="fileSrc" width="100%" height="900px">
    <span slot="footer" class="dialog-footer">
  </span>
</el-dialog> -->
</div>
</template>

<script>
    import {
        regionDataPlus,
    } from 'element-china-area-data'
    export default {
        data() {
            return {
                serchInput: '',
                viewFileDialogVisible: false,
                fileSrc: '',
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataForm: {
                    status: '',

                },
                selectedOptions: [],
                cityInfo: {
                    pcatype: '',
                    pcaid: ''
                },
                options: regionDataPlus,
                multipleSelection: [],
                showMoveBtn: false,
                errorMsgInput: '',
                errorMsgvisible: false,
                approvalData: {
                    id: '',
                    verifyState: 0,
                    verifyFailReason: ''
                }
            };
        },
        components: {},
        created() {
            this.getApprovalFile();
        },
        watch: {},
        methods: {
            // 根据当前查询条件查询
            queryByCriteria() {
                this.pageIndex = 1
                this.getApprovalFile()
            },
            // 根据条件查找不同状态审核文件的接口
            getApprovalFile() {
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl("/publicResource/getApprovalFile"),
                    method: "get",
                    params: this.$http.adornParams({
                        fileName: this.serchInput,
                        page: this.pageIndex,
                        limit: this.pageSize,
                        verifyState: this.dataForm.status,
                        pcatype: this.cityInfo.pcatype,
                        pcaid: this.cityInfo.pcaid
                    })
                }).then(({
                    data
                }) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.records;
                        this.totalPage = data.data.total;
                    } else {
                        this.dataList = [];
                        this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                });
            },
            // 点击切换文件审核状态
            switchAuditStatus(command) {
                this.approvalData.id = command[0]
                this.approvalData.verifyState = command[1]
                if (command[1] == 2) {
                    this.errorMsgvisible = true

                } else {
                    this.dataListLoading = true

                    this.$http({
                        url: this.$http.adornUrl("/publicResource/approvalFile"),
                        method: "post",
                        data: this.$http.adornData(this.approvalData)
                    }).then(({
                        data
                    }) => {
                        this.getApprovalFile()
                    });
                }
            },
            approvalErrorFile() {
                this.errorMsgvisible = false
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl("/publicResource/approvalFile"),
                    method: "post",
                    data: this.$http.adornData(this.approvalData)
                }).then(({
                    data
                }) => {
                    this.approvalData.verifyFailReason = ''
                    this.getApprovalFile()
                });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getApprovalFile()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getApprovalFile()
            },
            // 删除
            deleteHandle(row) {
                debugger
                this.$confirm(`确定对[${row.fileName}]进行[删除]操作?`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        this.$http({
                            url: this.$http.adornUrl("/publicResource/deleteFile"),
                            method: "post",
                            data: this.$http.adornData([row.id], false),
                        }).then(({
                            data
                        }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "删除成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        this.getApprovalFile()
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    })
                    .catch(() => {});
            },
            // 查看文档
            viewFile(row) {
                const elemtA = document.createElement('a')
                elemtA.setAttribute('href', row.fileAddress)
                elemtA.setAttribute('target', '"_blank"')
                elemtA.setAttribute('download', row.fileName)
                    // const event = new MouseEvent('click')
                elemtA.click()
                    // document.body.removeChild(elemtA)
            },
            // 点击多选框事件
            handleSelectionChange(val) {
                this.showMoveBtn = val.length != 0
                this.multipleSelection = val
            },
            // 删除多个文件
            multipledeleteHandle() {
                const ids = []
                this.multipleSelection.forEach(item => {
                    ids.push(item.id)
                })
                this.$confirm(`确定对这些文件进行[删除]操作?`, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        this.$http({
                            url: this.$http.adornUrl("/publicResource/deleteFile"),
                            method: "post",
                            data: this.$http.adornData(ids, false),
                        }).then(({
                            data
                        }) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: "删除成功",
                                    type: "success",
                                    duration: 1500,
                                    onClose: () => {
                                        this.getApprovalFile()
                                    },
                                });
                            } else {
                                this.$message.error(data.msg);
                            }
                        });
                    })
                    .catch(() => {});
            },
            // 点击城市事件
            handleCityChange(value) {
                console.log(value)
                console.log(this.selectedOptions)
                let len = value.length
                    // 如果长度为0 说明清空了城市条件，如果不为就提取城市的信息id
                if (value != 0) {
                    // 如果最后一位是空的  那么就拿前一位的值
                    if (value[len - 1] == '') {
                        // 如果最后一位是空的 那么就取前一个值
                        if (len == 1) {
                            Object.assign(this.$data.cityInfo, this.$options.data().cityInfo)
                        } else {
                            this.cityInfo.pcatype = len - 2
                            this.cityInfo.pcaid = value[len - 2]
                        }

                    } else {
                        // 如果最后一位不是空的  那么就直接取最后一个
                        this.cityInfo.pcatype = len - 1
                        this.cityInfo.pcaid = value[len - 1]
                    }
                } else {
                    Object.assign(this.$data.cityInfo, this.$options.data().cityInfo)
                }
                this.queryByCriteria()
            }
        },
    };
</script>